<template>
  <el-row>
    <el-col :span="10"><div class="rework">
      <el-card class="rework-card">
        <div class="content_top">
          <div class="device_check">
            <p class="dev_code">设备唯一码</p>
            <el-input
                class="dev_input"
                placeholder="请输入或扫码"
                suffix-icon="el-icon-saoma"
                v-model="device_input">
            </el-input>
            <el-button type="primary" class="dev_button">确定</el-button>
          </div>
          <div class="model_code">
            <p class="model_head">关联机型代码</p>
            <el-select v-model="value" filterable allow-create clearable placeholder="请选择" class="model_select">
              <el-option
                  v-for="item in options"
                  :key="item.index"
                  :label="item.label"
                  :value="item.index">
              </el-option>
            </el-select>
            <p class="net_code">已关联3个机型代码</p>
          </div>
        </div>
        <div class="content_bottom">
          <div class="head">
            <h3 class="rework_title"></h3>
          </div>
          <el-table
              :data="tableData"
              style="width: 100%"
              height="400px" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column v-for="(val, key) in tableLabel" :prop="key" :label="val" :key="key" :width="getColumnWidth(key)" />
          </el-table>
          <div class="button-container">
            <el-button type="primary" class="dev_button" >返工</el-button>
            <el-button class="dev_button cancel">取消</el-button>
          </div>
        </div>
      </el-card>
    </div></el-col>
    <el-col :span="14"><div class="detail">
      <el-card class="detail-card">
        <el-empty v-if="!selectedDevice" description="暂无设备信息" style="height: 800px">
          <template #image>
            <div class="custom-empty-content">
              <img src="https://img2.imgtp.com/2024/04/03/fhG64MFW.png" class="custom-image">
            </div>
          </template>
        </el-empty>
        <div v-else>
          <div class="head">
            <h3 class="detail_title"></h3>
          </div>
        </div>
      </el-card>
    </div></el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      device_input: "",
      value:"",
      selectedDevice:false,
      options:[
        {index:1,label:'B150'},
        {index:2,label:'B151'},
        {index:3,label:'B152'}
      ],
      tableData:[
        {
          selected: false,
          id: 1,
          code: 'B150',
          devCode: '266Axxxxxxxx',
          clientName: '北京云天创想科技有限公司',
          devName: '孝心呼叫器'
        },
        {
          selected: false,
          id: 2,
          code: 'B151',
          devCode: '266Axxxxxxxx',
          clientName: '时刻智能',
          devName: '门窗开关提醒器'
        },
        {
          selected: false,
          id: 3,
          code: 'B150',
          devCode: '266Axxxxxxxx',
          clientName: '远创',
          devName: '孝心呼叫器'
        },
        {
          selected: false,
          id: 4,
          code: 'B151',
          devCode: '266Axxxxxxxx',
          clientName: '时刻智能家居',
          devName: '孝心呼叫器'
        }
      ],
      tableLabel: {
        id: "序号",
        code: "机型代码",
        devCode: "设备唯一码",
        clientName: "客户名称",
        devName: "返工设备"
      },
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.selectedDevice = true;
      const devId = val.id;
      console.log(devId);
    },
    getColumnWidth(key) {
      // 返回不同列的宽度
      if (key === 'id') {
        return '50px'; // 设置boxCode列的宽度为150px
      }
    }
  },
};
</script>
<style lang="less" scoped>
.rework {
  .rework-card {
    .content_top {
      margin-bottom: 80px;
      .device_check {
        margin-top: 20px; /* 向上移动内容*/
        margin-left: 20px;
        display: flex;
        align-items: center; /* 垂直居中 */
      }
      .model_code {
        margin-top: 40px;
        margin-left: 20px;
        display: flex;
        align-items: center; /* 垂直居中 */
        .model_head {
          font-size: 14px;
          color: #999999;
          width: 30%; /* 设置 p 元素的宽度比例 */
        }
        .net_code {
          font-size: 14px;
          color: #999999;
          margin-left: 10px;
        }
      }
    }
    .content_bottom {
      .button-container{
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
.detail {
  margin-left: 10px;
}
.rework_title::before {
  content: '待返工列表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //position: relative; /* 设置相对定位 */
  //top: 50px; /* 调整标题向上偏移的距离 */
}
.detail_title::before {
  content: '设备履历表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //position: relative; /* 设置相对定位 */
  //top: 50px; /* 调整标题向上偏移的距离 */
}
</style>